<template>
  <div>
    <h1>App headers</h1>
    <router-view></router-view>
    <h2>App footer</h2>
    <button @click="show">show</button>
    <v-region @values="regionChange"></v-region>
    <hr />
    <h1>Vuex中的数据</h1>
    <p>
      {{ $store.state.name }}==={{ $store.state.age }}====moduleA:{{
        $store.state.moduleA.likes
      }}
    </p>
    <hr />
    <h1>qiniuyun test upload</h1>
    <Qiniuyun></Qiniuyun>
    <hr />
    <button @click="$store.commit('changeName', 'tang')">changeName</button>
    <button @click="asyncAddNumber">asyncAddNumber</button>
    <button @click="addLikes('zhonguo')">addLikes</button>
    <button @click="asyncAddLikes('shanghai')">asyncAddLikes</button>

    <hr />
    <h3>upload component</h3>
    <upload></upload>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore, mapActions, createNamespacedHelpers } from 'vuex';
import { useRouter } from 'vue-router';
import Qiniuyun from '@/components/qiniuyun/index.vue';
import Upload from '@/components/upload/index.vue';
export default defineComponent({
  name: '',
  components: {
    Qiniuyun,
    Upload,
  },
  setup() {
    const regionChange = e => {
      console.log(e);
    };
    const { mapMutations: moduleAMapMutations, mapActions: moduleAMapActions } =
      createNamespacedHelpers('moduleA');
    const router = useRouter();
    const store = useStore();
    const show = () => {
      console.log(router.getRoutes());
    };
    return {
      show,
      store,
      ...mapActions(['asyncAddNumber']),
      ...moduleAMapMutations(['addLikes']),
      ...moduleAMapActions(['asyncAddLikes']),
      regionChange,
    };
  },
});
</script>

<style scoped></style>
